import { useTranslation } from 'react-i18next';
import { Helmet } from 'react-helmet-async';
import { Link } from 'react-router-dom';
import { motion } from 'framer-motion';
import { Header } from '@/components/Header';
import { Footer } from '@/components/Footer';
import { useSEOConfig, generateHreflangTags, generateStructuredData } from '@/lib/seo';

export default function AboutPartners() {
  const { t } = useTranslation();
  const seoConfig = useSEOConfig({
    title: `${t('header.partners')} - 豆豆Pay`,
    description: t('seo.pages.aboutPartners.description')
  });
  const hreflangTags = generateHreflangTags('/about/partners');
  const structuredData = generateStructuredData(seoConfig, 'organization');
  
  // 合作伙伴数据
  const partners = [
    {
      name: t('aboutPages.partners.mufg'),
      description: t('aboutPages.partners.mufgDesc'),
      logoUrl: "https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=bank%20logo%2C%20Mitsubishi%20UFJ%20Bank%2C%20corporate%20identity&sign=b8145d4cb86f94ecee077e0f1d245f8a"
    },
    {
      name: t('aboutPages.partners.sumitomoMitsui'),
      description: t('aboutPages.partners.sumitomoMitsuiDesc'),
      logoUrl: "https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=bank%20logo%2C%20Sumitomo%20Mitsui%20Bank%2C%20corporate%20identity&sign=2bf4a3ddee67f8e047a13674a5d38f7e"
    },
    {
      name: t('aboutPages.partners.mizuho'),
      description: t('aboutPages.partners.mizuhoDesc'),
      logoUrl: "https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=bank%20logo%2C%20Mizuho%20Bank%2C%20corporate%20identity&sign=5dc3328f9c6d8c495e3f93008cac948b"
    },
    {
      name: t('aboutPages.partners.jcb'),
      description: t('aboutPages.partners.jcbDesc'),
      logoUrl: "https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=credit%20card%20logo%2C%20JCB%20International%2C%20corporate%20identity&sign=c47609e09c2b2a91a58741ee6b725d5a"
    },
    {
      name: t('aboutPages.partners.rakuten'),
      description: t('aboutPages.partners.rakutenDesc'),
      logoUrl: "https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=corporate%20logo%2C%20Rakuten%20Group%2C%20corporate%20identity&sign=7300cdc5d041e03ce02c167f5d5c295b"
    },
    {
      name: t('aboutPages.partners.linePay'),
      description: t('aboutPages.partners.linePayDesc'),
      logoUrl: "https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=payment%20logo%2C%20LINE%20Pay%2C%20corporate%20identity&sign=931dc88cf93f16d0d4d046fb3a506dc7"
    },
    {
      name: t('aboutPages.partners.yahooJapan'),
      description: t('aboutPages.partners.yahooJapanDesc'),
      logoUrl: "https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=internet%20company%20logo%2C%20Yahoo%20Japan%2C%20corporate%20identity&sign=8b8babac6c93cdf12210b9a117400e09"
    },
    {
      name: t('aboutPages.partners.softbank'),
      description: t('aboutPages.partners.softbankDesc'),
      logoUrl: "https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=corporate%20logo%2C%20SoftBank%20Group%2C%20corporate%20identity&sign=089313182a849936bc0f53226be98d2f"
    }
  ];
  
  // 合作领域数据
  const cooperationAreas = [
    {
      title: t('aboutPages.partners.financialInstitutions'),
      description: t('aboutPages.partners.financialInstitutionsDesc'),
      icon: "fa-university"
    },
    {
      title: t('aboutPages.partners.technologyPartners'),
      description: t('aboutPages.partners.technologyPartnersDesc'),
      icon: "fa-microchip"
    },
    {
      title: t('aboutPages.partners.merchantEcosystem'),
      description: t('aboutPages.partners.merchantEcosystemDesc'),
      icon: "fa-shopping-bag"
    },
    {
      title: t('aboutPages.partners.crossBorderPayment'),
      description: t('aboutPages.partners.crossBorderPaymentDesc'),
      icon: "fa-globe"
    }
  ];
  
  return (
    <div className="min-h-screen flex flex-col bg-white">
      <Helmet>
        {/* Basic Meta Tags */}
        <title>{seoConfig.title}</title>
        <meta name="description" content={seoConfig.description} />
        <meta name="keywords" content={seoConfig.keywords} />

        {/* Canonical URL */}
        <link rel="canonical" href={seoConfig.url} />

        {/* Open Graph / Facebook */}
        <meta property="og:title" content={seoConfig.title} />
        <meta property="og:description" content={seoConfig.description} />
        <meta property="og:image" content={seoConfig.image} />
        <meta property="og:url" content={seoConfig.url} />
        <meta property="og:locale" content={seoConfig.locale} />
        <meta property="og:site_name" content={seoConfig.siteName} />
        <meta property="og:type" content="website" />

        {/* Twitter */}
        <meta name="twitter:title" content={seoConfig.title} />
        <meta name="twitter:description" content={seoConfig.description} />
        <meta name="twitter:image" content={seoConfig.image} />
        <meta name="twitter:card" content="summary_large_image" />

        {/* Hreflang tags for multilingual SEO */}
        {hreflangTags.map((tag, index) => (
          <link key={index} rel={tag.rel} hrefLang={tag.hreflang} href={tag.href} />
        ))}

        {/* Structured Data */}
        <script type="application/ld+json">
          {JSON.stringify(structuredData)}
        </script>
      </Helmet>
      
      <Header />
      
      <main className="flex-grow">
        {/* 页面标题区域 */}
        <section className="py-16 md:py-24 bg-gradient-to-r from-blue-50 to-indigo-50">
          <div className="container mx-auto px-4">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8 }}
              className="max-w-3xl mx-auto text-center"
            >
              <h1 className="text-3xl md:text-5xl font-bold text-gray-900 mb-6">
                {t('header.partners')}
              </h1>
              <div className="w-20 h-1 bg-blue-500 mx-auto mb-8 rounded-full"></div>
              <p className="text-lg md:text-xl text-gray-700 leading-relaxed">
                {t('aboutPages.partners.subtitle')}
              </p> 
            </motion.div>
          </div>
        </section>
        
        {/* 合作理念 */}
        <section className="py-20 bg-white">
          <div className="container mx-auto px-4">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
              <motion.div
                initial={{ opacity: 0, x: -30 }}
                whileInView={{ opacity: 1, x: 0 }}
                transition={{ duration: 0.8 }}
                viewport={{ once: true }}
              >
                <h2 className="text-2xl md:text-3xl font-bold text-gray-900 mb-6">{t('aboutPages.partners.cooperationPhilosophy')}</h2>
                <div className="w-16 h-1 bg-blue-500 mb-8 rounded-full"></div>
                
                <div className="space-y-6 text-gray-700">
                  <p className="leading-relaxed">
                    {t('aboutPages.partners.philosophyDesc1')}
                  </p>
                  <p className="leading-relaxed">
                    {t('aboutPages.partners.philosophyDesc2')}
                  </p>
                  <p className="leading-relaxed">
                    {t('aboutPages.partners.philosophyDesc3')}
                  </p>
                </div>
                
                <div className="mt-10 grid grid-cols-2 gap-6">
                  <div className="flex items-start">
                    <div className="text-blue-600 mr-4 mt-1">
                      <i className="fa-solid fa-check-circle text-xl"></i>
                    </div>
                    <div>
                      <h3 className="font-bold text-gray-900 mb-1">{t('aboutPages.partners.complementaryAdvantages')}</h3>
                      <p className="text-gray-600 text-sm">{t('aboutPages.partners.complementaryAdvantagesDesc')}</p>
                    </div>
                  </div>
                  <div className="flex items-start">
                    <div className="text-blue-600 mr-4 mt-1">
                      <i className="fa-solid fa-check-circle text-xl"></i>
                    </div>
                    <div>
                      <h3 className="font-bold text-gray-900 mb-1">{t('aboutPages.partners.mutualBenefit')}</h3>
                      <p className="text-gray-600 text-sm">{t('aboutPages.partners.mutualBenefitDesc')}</p>
                    </div>
                  </div>
                  <div className="flex items-start">
                    <div className="text-blue-600 mr-4 mt-1">
                      <i className="fa-solid fa-check-circle text-xl"></i>
                    </div>
                    <div>
                      <h3 className="font-bold text-gray-900 mb-1">{t('aboutPages.partners.longTermCooperation')}</h3>
                      <p className="text-gray-600 text-sm">{t('aboutPages.partners.longTermCooperationDesc')}</p>
                    </div>
                  </div>
                  <div className="flex items-start">
                    <div className="text-blue-600 mr-4 mt-1">
                      <i className="fa-solid fa-check-circle text-xl"></i>
                    </div>
                    <div>
                      <h3 className="font-bold text-gray-900 mb-1">{t('aboutPages.partners.innovationDriven')}</h3>
                      <p className="text-gray-600 text-sm">{t('aboutPages.partners.innovationDrivenDesc')}</p>
                    </div>
                  </div>
                </div>
              </motion.div>
              
              <motion.div
                initial={{ opacity: 0, x: 30 }}
                whileInView={{ opacity: 1, x: 0 }}
                transition={{ duration: 0.8, delay: 0.3 }}
                viewport={{ once: true }}
                className="relative"
              >
                <div className="rounded-xl overflow-hidden shadow-2xl">
                  <img 
                    src="https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=business%20partnership%2C%20handshake%20agreement%2C%20corporate%20collaboration&sign=9972068f4c5b0c47f3e9c87285f8e9e9" 
                    alt={t('aboutPages.partners.partnershipAgreementAlt')} 
                    className="w-full h-auto"
                  />
                </div>
                <div className="absolute -bottom-6 -right-6 w-40 h-40 bg-blue-100 rounded-full -z-10"></div>
                <div className="absolute -top-6 -left-6 w-24 h-24 bg-indigo-100 rounded-full -z-10"></div>
              </motion.div>
            </div>
          </div>
        </section>
        
        {/* 合作领域 */}
        <section className="py-20 bg-gray-50">
          <div className="container mx-auto px-4">
            <div className="text-center max-w-3xl mx-auto mb-16">
              <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">{t('aboutPages.partners.cooperationAreas')}</h2>
              <div className="w-20 h-1 bg-blue-500 mx-auto mb-8 rounded-full"></div>
              <p className="text-gray-700">
                {t('aboutPages.partners.areasSubtitle')}
              </p>
            </div>
            
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
              {cooperationAreas.map((area, index) => (
                <motion.div
                  key={index}
                  initial={{ opacity: 0, y: 30 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.5, delay: index * 0.1 }}
                  viewport={{ once: true }}
                  className="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1"
                >
                  <div className="w-14 h-14 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mb-6">
                    <i className={`fa-solid ${area.icon} text-2xl`}></i>
                  </div>
                  <h3 className="text-xl font-bold text-gray-900 mb-3">
                    {area.title}
                  </h3>
                  <p className="text-gray-600">
                    {area.description}
                  </p>
                </motion.div>
              ))}
            </div>
          </div>
        </section>
        
        {/* 合作伙伴展示 */}
        <section className="py-20 bg-white">
          <div className="container mx-auto px-4">
            <div className="text-center max-w-3xl mx-auto mb-16">
              <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">{t('aboutPages.partners.strategicPartners')}</h2>
              <div className="w-20 h-1 bg-blue-500 mx-auto mb-8 rounded-full"></div>
              <p className="text-gray-700">
                {t('aboutPages.partners.partnersSubtitle')}
              </p>
            </div>
            
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
              {partners.map((partner, index) => (
                <motion.div
                  key={index}
                  initial={{ opacity: 0, scale: 0.9 }}
                  whileInView={{ opacity: 1, scale: 1 }}
                  transition={{ duration: 0.5, delay: index * 0.05 }}
                  viewport={{ once: true }}
                  className="bg-gray-50 rounded-xl p-8 flex flex-col items-center text-center hover:shadow-md transition-shadow"
                >
                  <div className="w-40 h-40 bg-white rounded-lg flex items-center justify-center mb-6 p-4">
                    <img 
                      src={partner.logoUrl} 
                      alt={partner.name} 
                      className="max-w-full max-h-full object-contain"
                    />
                  </div>
                  <h3 className="text-xl font-bold text-gray-900 mb-2">
                    {partner.name}
                  </h3>
                  <p className="text-gray-600 text-sm">
                    {partner.description}
                  </p>
                </motion.div>
              ))}
            </div>
            
            {/* 更多合作伙伴 */}
            {/* <div className="mt-20">
              <h3 className="text-2xl font-bold text-gray-900 mb-10 text-center">{t('aboutPages.partners.partnerNetwork')}</h3>
              <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-8">
                {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((i) => (
                  <motion.div
                    key={i}
                    initial={{ opacity: 0, scale: 0.9 }}
                    whileInView={{ opacity: 1, scale: 1 }}
                    transition={{ duration: 0.3, delay: i * 0.03 }}
                    viewport={{ once: true }}
                    className="bg-gray-50 rounded-lg p-6 flex items-center justify-center hover:bg-gray-100 transition-colors"
                  >
                    <div className="w-full h-12 bg-gray-200 rounded flex items-center justify-center text-gray-500">
                      {t('aboutPages.partners.partner')} {i}
                    </div>
                  </motion.div>
                ))}
              </div>
            </div> */}
          </div>
        </section>
        
        {/* 合作申请 */}
        <section className="py-20 bg-blue-600 text-white">
          <div className="container mx-auto px-4 text-center">
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8 }}
              viewport={{ once: true }}
            >
              <h2 className="text-3xl md:text-4xl font-bold mb-6">{t('aboutPages.partners.becomePartner')}</h2>
              <p className="text-xl text-blue-100 max-w-2xl mx-auto mb-10">
                {t('aboutPages.partners.partnerInvitation')}
              </p>
              <Link
                to="/about/contact"
                className="inline-flex items-center px-8 py-4 bg-white text-blue-600 font-medium rounded-md hover:bg-blue-50 transition-colors shadow-lg"
              >
                {t('aboutPages.partners.cooperationConsultation')}
                <i className="fa-solid fa-arrow-right ml-2"></i>
              </Link>
            </motion.div>
          </div>
        </section>
      </main>
      
      <Footer />
    </div>
  );
}